<!--手机号快速注册页面-->
<template>
  <div class="login">
    <div class="login-center">
      <!--登录信息输入-->
      <div class="login-input">
        <div class="login-input-user">
          <span>姓名</span>
          <input type="text" v-model="name" placeholder="请输入姓名">
        </div>
        <div class="login-input-user">
          <span>密码</span>
          <input type="password" v-model="passwordO" placeholder="请输入密码">
        </div>
        <div class="login-input-user">
          <span>确认密码</span>
          <input type="password" v-model="password" placeholder="请输入确认密码">
        </div>
        <div class="login-input-pass">
          <span class="title">手机号</span>
          <input type="text" v-model="username" placeholder="请输入手机号">
          <span class="login-input-text">+86</span>
        </div>
        <div class="login-input-pass">
          <span class="title">验证码</span>
          <input type="text" v-model="verifyCode" placeholder="请输入验证码">
          <span v-show="show" @click="getCode" class="login-input-span">获取验证码</span>
          <span v-show="!show" class="login-input-count">重新发送({{count}})</span>
        </div>
        <div class="login-input-bt" @click="registered">
          <span>立即注册</span>
        </div>
        <div class="span1">
                        <p>企业用户注册后，须进行公司认证，方可开通相应功能</p>
                        <p>付费账户每月680起，具体以签署协议为准</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as userAPI from "@/api/user";
export default {
  name: "Login",
  	data() {
	    return {
	      show: true,
	      count: "",
	      timer: null,
	      username: "", //手机号
	      verifyCode: "", //验证码
	      name: "", //姓名
	      passwordO: "", //密码
	      password: "", //密码
	      reg: /^1[3456789]\d{9}$/
	    }
	},
	methods: {
		getCode() {
			if(!this.reg.test(this.username)) {
				this.$message.warning("请输入正确的手机号");
				return;
			}
			const TIME_COUNT = 120;
			if(!this.timer) {
				userAPI
					.getVerifyCode({
							type:"0",
            phone: this.username
          })
          .then(res => {
            if (res.code !== 400) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
            console.log(res, "====验证码信息====");
          })
          .catch(err => {
            console.log(err, "====验证码信息获取失败====");
          });
      }
    },
    registered() {
      if (!this.name) {
        this.$message.warning("请输入姓名");
        return;
      }
      if (!this.passwordO) {
        this.$message.warning("请输入密码");
        return;
      }else if(this.passwordO.length<6 || this.passwordO.length>12){
         this.$message.warning("密码限制为6-12位");
        return;
      }
      if (!this.password) {
        this.$message.warning("请输入确认密码");
        return;
      }else if(this.password!=this.passwordO){
        this.$message.warning("两次密码输入不一致，请重新输入");
        return;
      }
      if (this.password != this.passwordO) {
        this.$message.warning("密码确认错误");
        return;
      }
      if (!this.reg.test(this.username)) {
        this.$message.warning("请输入正确的手机号");
        return;
      }
      if (!this.verifyCode) {
        this.$message.warning("请输入验证码");
        return;
      }
      let obj = {
        username: this.username,
        verifyCode: this.verifyCode,
        name: this.name,
        password: this.password
      };
      userAPI
        .register(obj)
        .then(res => {
          console.log(res, "=====注册信息====");
          if (res.code == 200) {
            this.$router.push({path:'/Loginsuccess'});
            // this.$router.back(-1);
          }
        })
        .catch(err => {
          console.log(err, "====注册失败====");
        });
    }
  }
};
</script>
<style lang="scss" scoped>
/*登录logo*/
.span1 p{
            text-align: center;
            font-size: 13px;
            color: #666;
            margin-top: 13px;
      }
.login {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #ffffff;
}

.login-center {
  width: 640px;
  margin: 0 auto;
}
/*登录信息输入*/

.login-input {
  padding: 50px 20px;
}

.login-input-title {
  border-bottom: 1px #f4f4f4 solid;
  color: #333333;
  font-size: 14px;
  width: 100%;
  display: flex;
  height: 45px;
  line-height: 45px;
  align-items: center;
  justify-content: space-between;
}

.login-input-pass {
  display: flex;
  border-bottom: 1px #f4f4f4 solid;
  align-items: center;
}
.login-input-pass .title {
  display: inline-block;
  font-size: 14px;
  color: #666666;
  width: 80px;
  margin-right: 15px;
}
.login-input-pass > input {
  flex: 1;
  border: none;
  height: 45px;
  line-height: 45px;
  outline: none;
}

.login-input-span {
  font-size: 14px;
  color: #37b3ff;
  width: 100px;
  border-left: 1px #dcdcdc solid;
  padding-left: 15px;
  margin-left: 15px;
  cursor: pointer;
}

.login-input-count {
  font-size: 14px;
  color: #bbbbbb;
  width: 100px;
  border-left: 1px #dcdcdc solid;
  padding-left: 15px;
  margin-left: 15px;
}

.login-input-text {
  font-size: 14px;
  color: #bbbbbb;
  width: 100px;
  border-left: 1px #dcdcdc solid;
  padding-left: 15px;
  margin-left: 15px;
}

.login-input-bt {
  margin-top: 20px;
  text-align: center;
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: #37b3ff;
  color: #ffffff;
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
}

.login-input-user {
  border-bottom: 1px #f4f4f4 solid;
  display: flex;
  align-items: center;
}

.login-input-user > input {
  flex: 1;
  border: none;
  height: 45px;
  line-height: 45px;
  outline: none;
}

.login-input-user > span {
  display: inline-block;
  font-size: 14px;
  color: #666666;
  width: 80px;
  margin-right: 15px;
}
</style>
